<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <!-- 如果想要出现动画的效果，需要使用transition 进行包裹，vue就给你加上合适的样式效果 -->
        <!-- appear属性：true表达式布尔值，代表了初始化界面就演示动画效果。也可以直接写appear -->
        <!-- <transition :appear="true">
            <h1 v-show="isShow">你好啊！</h1>
        </transition> -->

        <!-- 直接书写appear是和:appear="true" 效果一样的。 -->
        <transition name="hello" appear>
            <h1 v-show="isShow">你好啊！</h1>
        </transition>
    </div>
</template>

<script>
    export default {
        name: 'Test',
        data() {
            return {
                isShow: true
            };
        },
    };
</script>

<style scoped>
    h1 {
        background-color: orange;
        /* 为了完成过度效果，0.5秒钟，匀速。也可以写到vue所使用的样式中 */
        /* transition: 0.5s linear; */
    }

    /* 使用过度来完成动态效果。可以将相同样式的class写到一起。 */
    /* 进入的起点、离开的终点 */
    .hello-enter,
    .hello-leave-to {
        /* 进入的起点是远处，搞成-100% */
        transform: translateX(-100%);
    }

    /* 如果使用transition和vue实现动画效果的话，必须使用vue指定的样式名称才可以 */
    .hello-enter-active,
    .hello-leave-active {
        /* 来的样式，播放动画 */
        transition: 0.5s linear;
    }

    /* 进入的终点 */
    .hello-enter-to,
    .hello-leave {
        /* 进入的终点，没有任何位移就可以显示出效果 */
        transform: translateX(0);
    }
</style>